<template>
  <div class="lineRoom" :style='{ width: theWidth }'>
    <img v-if="theSmall" src="@/assets/images/cuttingLineSmall.png" alt="cuttingLineSmall">
    <img v-if="theMedium" src="@/assets/images/cuttingLineMedium.png" alt="cuttingLineMedium">
    <img v-if="theLarge" src="@/assets/images/cuttingLineLarge.png" alt="cuttingLineLarge">
  </div>
</template>
<script>
export default {
  props: {
    theSize: String
  },
  mounted() {
    if (this.theSize == 'small') {
      this.theSmall = true
      this.theWidth = '480px'
    } else if (this.theSize == 'medium') {
      this.theMedium = true
      this.theWidth = '600px'
    } else if (this.theSize == 'large') {
      this.theLarge = true
      this.theWidth = '910px'
    }
  },
  data() {
    return {
      theSmall: false,  /* small 480px */
      theMedium: false,   /* medium 600px */
      theLarge: false,   /* large 910px */
      theWidth: ''
    }
  },
}
</script>
<style>
.lineRoom {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 2px;
  margin-top: 8px;
}
</style>